<script setup lang="ts">
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref } from 'vue'
import { ElMessage, type ElMessageOptions } from 'element-plus'
import { LocationInformation, Phone, AlarmClock, ShoppingCart } from '@element-plus/icons-vue'

//获取路由器对象
let $router = useRouter()
let $route = useRoute()

const dialogTableVisible = ref(false)
const radio = ref(1)

type gridDataType = {
  date: number
  picture: string
  name: string
  price: number
  number: number
  vipPrice: number
}
const gridData = ref([] as gridDataType[])
const orderData = ref([
  {
    foodid: 1, //购买的食物
    price: 0, //该详细总价（分vip还是普通）
    number: 0 //购买的数量
  }
])
const obj = reactive({
  clicktime: 0, //点击次数
  totalprice: 0, //总价格
  VipTotalPrice: 0 //总会员价格
})

type menu = {
  foodid: number
  restaurantid: number
  image: string
  price: number
  vipprice: number
  introduction: string
  sales: string
  state: string
  foodname: string
}
// 获取菜单
const foodmenu = ref([] as menu[])
axios({
  method: 'POST',
  params: {
    restaurantid: $route.query.restaurantid
  },
  url: 'http://localhost:8080/food/getall',
  headers: {
    'Content-Type': 'application/octet-stream',
    Authorization: window.localStorage.getItem('Usertoken')
  }
}).then((res) => {
  const { data } = res
  foodmenu.value = data.data
  console.log(data.data)
})
// 获取推荐菜单
const recommendedFoodForm = ref([] as menu[])
function getRecommendedFoodForm() {
  axios({
    method: 'POST',
    params: {
      restaurantid: $route.query.restaurantid
    },
    url: 'http://localhost:8080/food/getallcommend',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then((res) => {
    const { data } = res
    recommendedFoodForm.value = data.data
  })
}
getRecommendedFoodForm()
// 评论
type review1 = {
  reviewid: number
  orderid: number
  review: string
  point: number
  image: string
  reply: string
  createtime: string
}
const reviewmenu1 = ref([] as review1[])
axios({
  method: 'POST',
  params: {
    resid: $route.query.restaurantid
  },
  url: 'http://localhost:8080/review/getallbyresid',
  headers: {
    'Content-Type': 'application/octet-stream',
    Authorization: window.localStorage.getItem('Usertoken')
  }
}).then(
  (res) => {
    const { data } = res
    reviewmenu1.value = data.data
    console.log(data.data)
  },
  (err) => {
    console.log('获取评论', err)
    ElMessage.error('获取评论失败')
  }
)

const activeName = ref('first')

orderData.value.pop()
gridData.value.pop()

function add(
  fooidTemp: number,
  imageTemp: string,
  priceTemp: number,
  vippriceTemp: number,
  foodnameTemp: string
) {
  obj.totalprice += priceTemp
  obj.VipTotalPrice += vippriceTemp
  obj.clicktime++
  const existingItemIndex = gridData.value.findIndex((item) => item.date === fooidTemp)
  if (existingItemIndex !== -1) {
    gridData.value[existingItemIndex].number++
    orderData.value[existingItemIndex].number++
  } else {
    gridData.value.push({
      date: fooidTemp,
      picture: imageTemp,
      name: foodnameTemp,
      price: priceTemp,
      number: 1,
      vipPrice: vippriceTemp
    })
    orderData.value.push({
      foodid: fooidTemp,
      price: priceTemp,
      number: 1
    })
  }
}

function deleteitem(
  val: number,
  price: number,
  vipPrice: number,
  foodNumber: any,
  foodidTemp: any
) {
  gridData.value.splice(val, 1)
  obj.totalprice -= price
  obj.VipTotalPrice -= vipPrice
  obj.clicktime -= foodNumber
  orderData.value = orderData.value.filter((item) => item.foodid !== foodidTemp)
}

const personSum = ref(1)
const handleChange = (value: number) => {
  personSum.value = value
}
function payfood(total: number, vipTotal: number) {
  if (isVip.value === 1) {
    if (userform.value.money >= obj.VipTotalPrice) {
      axios({
        method: 'POST',
        data: {
          restaurantid: $route.query.restaurantid,
          price: obj.VipTotalPrice,
          way: radio.value,
          orders: orderData.value,
          person: personSum.value
        },
        url: 'http://localhost:8080/order/addOrder',
        headers: {
          'Content-Type': 'application/json',
          Authorization: window.localStorage.getItem('Usertoken')
        }
      }).then(
        (res) => {
          const { data } = res
          console.log(data.code)
          ElMessage.success('下单成功')
        },
        (err) => {
          ElMessage.error('请刷新网页后重新下单！')
        }
      )
    } else {
      ElMessage.error(`账户余额为${userform.value.money}元, 余额不足`)
    }
  } else {
    if (userform.value.money >= obj.totalprice) {
      axios({
        method: 'POST',
        data: {
          restaurantid: $route.query.restaurantid,
          price: obj.totalprice,
          way: radio.value,
          orders: orderData.value,
          person: personSum.value
        },
        url: 'http://localhost:8080/order/addOrder',
        headers: {
          'Content-Type': 'application/json',
          Authorization: window.localStorage.getItem('Usertoken')
        }
      }).then(
        (res) => {
          const { data } = res
          console.log(data.code)
          ElMessage.success('下单成功')
        },
        (err) => {
          ElMessage.error('请刷新网页后重新下单！')
        }
      )
    } else {
      ElMessage.error(`账户余额为${userform.value.money}余额不足`)
    }
  }
}
//按钮的点击回调
const goHome = () => {
  $router.push('/index')
}
const goshangjia = () => {
  $router.push('/shangjia')
}

const handleClick = (tab: any) => {
  console.log(tab.props.label)
  if (tab.props.label == '历史投诉') {
    getrestaurantComplainPassForm()
  }
}
// 商家已经审核通过表单
const restaurantComplainPassForm = ref([{}])

const getrestaurantComplainPassForm = () => {
  axios({
    method: 'post',
    url: 'http://localhost:8080/complain/getstate',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID'),
      state: 3
    },
    headers: {
      'Content-Type': 'application/json',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then(
    (res) => {
      restaurantComplainPassForm.value = res.data.data
      console.log('商家获得自己已经审核过的投诉', res.data.data)
      getrestaurantComplainNotPassForm()
    },
    (err) => {
      console.log(err)
      ElMessage.error('请刷新后在获取历史投诉信息')
    }
  )
}
// 获取驳回的投诉表单并追加到已经通过的表单
const getrestaurantComplainNotPassForm = () => {
  axios({
    method: 'post',
    url: 'http://localhost:8080/complain/getstate',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID'),
      state: 4
    },
    headers: {
      'Content-Type': 'application/json',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then(
    (res) => {
      const tempForm = res.data.data
      tempForm.forEach((item: any) => {
        restaurantComplainPassForm.value.push(item)
      })
      console.log('商家获得自己驳回的投诉', res.data.data)
    },
    (err) => {
      console.log(err)
      ElMessage.error('请刷新后在获取历史投诉信息')
    }
  )
}

let isVip = ref()
let userform = ref({
  userid: '',
  usertypeid: '',
  username: '',
  password: '',
  image: '',
  phone: '',
  createtime: '',
  updatetime: '',
  gender: 1,
  vip: 0,
  expiretime: '',
  age: 28,
  state: null,
  money: 0
})
// 获取用户是否为VIP， 用户账户金额
const getUserInfo = () => {
  console.log('获取用户信息')
  axios({
    method: 'get',
    url: 'http://localhost:8080/user/userInfo',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      userform.value = res.data.data
      if (userform.value.vip == 1) {
        isVip.value = 1
      } else {
        isVip.value = 0
      }
    },
    (err) => {
      ElMessage.error('获取用户信息失败')
      console.log(err)
    }
  )
}
getUserInfo()
function findPath(addressTemp: string) {
  $router.push({
    path: '/shopMap',
    query: {
      address: addressTemp
    }
  })
}
</script>

<template>
  <body class="bg-gray-50">
    <!-- 顶部 -->
    <header class="bg-red-600 text-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div>
          <span>重庆市</span>
        </div>
        <div class="flex space-x-4">
          <router-link
            active-class="active"
            to="/shangjia"
            class="hover:text-red-100 transition-colors"
            >返回主页</router-link
          >
          <router-link
            active-class="active"
            to="/perCenter"
            class="hover:text-red-100 transition-colors"
            >个人中心</router-link
          >
        </div>
      </div>
    </header>

    <!-- 头部 -->
    <header class="bg-white shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="logo">
          <a href="index.html" class="text-2xl font-bold text-red-600">美食点餐</a>
        </div>
        <div class="hidden md:flex items-center space-x-6">
          <button @click="goHome" class="px-4 py-2 hover:bg-red-50 rounded-md transition-colors">
            首页
          </button>
          <button
            @click="goshangjia"
            class="px-4 py-2 hover:bg-red-50 rounded-md transition-colors"
          >
            全部商家
          </button>
        </div>
      </div>
      <div class="md:hidden container mx-auto px-4 pb-4">
        <div class="flex space-x-4">
          <button @click="goHome" class="flex-1 py-2 bg-red-50 rounded-md">首页</button>
          <button @click="goshangjia" class="flex-1 py-2 bg-red-50 rounded-md">全部商家</button>
        </div>
      </div>
    </header>

    <main class="container mx-auto px-4 py-6">
      <!-- 面包屑导航 -->
      <nav class="mb-6 text-sm text-gray-600">
        <a @click="goHome" class="hover:text-red-600">首页</a>
        <span class="mx-2">/</span>
        <a @click="goshangjia" class="hover:text-red-600">全部商家</a>
        <span class="mx-2">/</span>
        <span class="text-red-600 font-medium">{{ $route.query.restaurantname }}</span>
      </nav>

      <!-- 商家详情 -->
      <section class="bg-white rounded-xl shadow-sm p-6 mb-8">
        <div class="flex flex-col md:flex-row gap-8">
          <div class="md:w-2/3">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">{{ $route.query.restaurantname }}</h1>

            <div class="space-y-4">
              <div class="flex items-center space-x-3 p-3 bg-red-50 rounded-lg">
                <span class="text-gray-700" @click="findPath($route.query.addressdetail)"
                  >餐厅地址：{{ $route.query.addressdetail }}</span
                >
              </div>

              <div class="flex items-center space-x-3 p-3 bg-red-50 rounded-lg">
                <span class="text-gray-700">联系电话：{{ $route.query.phone }}</span>
              </div>

              <div class="flex items-center space-x-3 p-3 bg-red-50 rounded-lg">
                <span class="text-gray-700"
                  >营业时间：{{ $route.query.createtime }}-{{ $route.query.updatetime }}</span
                >
              </div>
            </div>

            <!-- 标签页 -->
            <el-tabs
              v-model="activeName"
              class="mt-6"
              @tab-click="handleClick"
              style="border-bottom: 2px solid red-600"
            >
              <el-tab-pane label="评论" name="first">
                <el-table :data="reviewmenu1" :border="false" class="mt-4" style="width: 100%">
                  <el-table-column type="expand">
                    <template #default="props">
                      <div class="p-4 bg-gray-50 rounded-lg">
                        <p class="text-gray-700 mb-2">评论内容：{{ props.row.review }}</p>
                        <el-divider />
                        <div class="flex items-center">
                          <span class="text-gray-700">商家回复: {{ props.row.reply }}</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="60" label="序号" type="index" />
                  <el-table-column align="center" width="80" label="评论ID" prop="reviewid" />
                  <el-table-column align="center" property="picture" label="图片" width="100">
                    <template v-slot="scope">
                      <img :src="scope.row.image" class="w-20 h-16 object-cover rounded" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="120" label="用户评论" prop="review" />
                  <el-table-column align="center" width="60" label="评分" prop="point" />
                  <el-table-column align="center" width="180" label="评论时间" prop="createtime" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="历史投诉" name="third">
                <el-table
                  :data="restaurantComplainPassForm"
                  :border="false"
                  class="mt-4"
                  style="width: 100%"
                >
                  <el-table-column type="expand">
                    <template #default="props">
                      <div class="p-4 bg-gray-50 rounded-lg">
                        <p class="text-gray-700 mb-2">投诉内容：{{ props.row.complain }}</p>
                        <el-divider />
                        <div class="flex items-center">
                          <span class="text-gray-700">商家回复: {{ props.row.reply }}</span>
                        </div>
                        <el-divider />
                        <div class="flex items-center">
                          <span class="text-gray-700">赔偿金额：{{ props.row.supplement }}</span>
                        </div>
                        <el-divider />
                        <div class="mt-2">
                          <el-image
                            style="width: 180px; height: 180px"
                            :src="props.row.image"
                            fit="cover"
                            class="rounded"
                          />
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="60" label="序号" type="index" />
                  <el-table-column align="center" width="120" label="投诉ID" prop="complainid" />
                  <el-table-column align="center" width="300" label="发起时间" prop="createtime" />
                  <el-table-column align="center" width="150" label="状态" prop="state">
                    <template #default="{ row }">
                      <el-tag size="small" type="info" v-show="row.state == 0"
                        >管理员审核中...</el-tag
                      >
                      <el-tag size="small" type="warning" v-show="row.state == 1"
                        >商家审核中...</el-tag
                      >
                      <el-tag size="small" type="danger" v-show="row.state == 2"
                        >管理员审核未通过</el-tag
                      >
                      <el-tag size="small" type="success" v-show="row.state == 3"
                        >商家审核已通过</el-tag
                      >
                      <el-tag size="small" type="danger" v-show="row.state == 4"
                        >商家审核未通过</el-tag
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div class="md:w-1/3 flex justify-center">
            <img
              :src="$route.query.image"
              class="w-full max-w-md h-64 object-cover rounded-xl shadow-md"
            />
          </div>
        </div>
      </section>

      <!-- 商家美食 -->
      <section class="mb-8">
        <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">选择点菜</h2>

        <el-card class="shadow-sm">
          <el-tabs type="border-card" class="mt-4">
            <el-tab-pane label="今日推荐">
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
                <div
                  class="sj_cai bg-white rounded-xl shadow-sm overflow-hidden transition-transform hover:scale-105"
                  v-for="p in recommendedFoodForm"
                  :key="p.foodid"
                >
                  <div class="sj_cai_left p-4">
                    <div class="sj_cai_img mb-3">
                      <img :src="p.image" class="w-full h-48 object-cover rounded-lg" />
                    </div>
                    <div class="sj_cai_show">
                      <div class="flex items-center justify-between mb-2">
                        <h3 class="text-lg font-semibold text-gray-800">{{ p.foodname }}</h3>
                        <el-tag type="danger" class="text-sm">今日推荐</el-tag>
                      </div>

                      <div class="sj_cai_price_box flex items-center mt-2">
                        <div class="sj_cai_price text-red-600 font-bold mr-3">
                          会员价：￥ <span>{{ p.vipprice }}</span>
                        </div>
                        <div class="sj_cai_y_price text-gray-400 line-through">
                          原价:￥{{ p.price }}
                        </div>
                      </div>

                      <div class="sj_cai_price_box1 mt-2">
                        <div class="introduction text-gray-600 text-sm">
                          介绍：{{ p.introduction }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="p-4 border-t border-gray-100">
                    <div class="flex justify-between items-center">
                      <div class="p_price text-gray-500 text-sm">销售量:{{ p.sales }}</div>
                      <div class="sj_cai_buy">
                        <el-button
                          type="danger"
                          @click="add(p.foodid, p.image, p.price, p.vipprice, p.foodname)"
                          class="px-4 py-2 rounded-md hover:bg-red-700 transition-colors"
                        >
                          加入购物车
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="shop flex justify-end mt-8">
                <el-badge :value="obj.clicktime" class="item">
                  <el-button
                    size="large"
                    plain
                    @click="dialogTableVisible = true"
                    class="bg-white text-red-600 border border-red-600 rounded-full p-4 shadow-md hover:bg-red-50 transition-colors"
                  >
                    购物车
                  </el-button>

                  <el-dialog
                    v-model="dialogTableVisible"
                    title="购物车"
                    width="90%"
                    class="rounded-xl shadow-lg"
                  >
                    <el-table :data="gridData" class="mt-4">
                      <el-table-column align="center" type="index" label="编号" width="60" />
                      <el-table-column
                        align="center"
                        property="picture"
                        label="商品图片"
                        width="100"
                      >
                        <template v-slot="scope" class="sj_cai_img">
                          <img :src="scope.row.picture" class="w-16 h-16 object-cover rounded" />
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        property="name"
                        label="商品名称"
                        width="120"
                      />
                      <el-table-column align="center" property="price" label="商品价格" />
                      <el-table-column align="center" property="vipPrice" label="会员价格" />
                      <el-table-column align="center" property="number" label="商品数量" />
                      <el-table-column align="center" fixed="right" label="操作" width="120">
                        <template #default="scope">
                          <el-button
                            type="danger"
                            @click="
                              deleteitem(
                                scope.$index,
                                scope.row.price * scope.row.number,
                                scope.row.vipPrice * scope.row.number,
                                scope.row.number,
                                scope.row.date
                              )
                            "
                            class="px-3 py-1 text-sm"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <el-card class="mt-6 p-4 bg-red-50 rounded-lg">
                      <div class="flex justify-between items-center">
                        <div>
                          <el-text type="warning" size="large">
                            <div v-if="isVip == 0">您是非会员</div>
                            <div v-else>您是尊贵的会员</div>
                          </el-text>
                        </div>
                        <div>
                          <el-text type="warning" size="large">
                            <div v-if="isVip == 0">总金额：￥{{ obj.totalprice }}</div>
                            <div v-else>会员价：￥{{ obj.VipTotalPrice }}</div>
                          </el-text>
                        </div>
                      </div>
                    </el-card>

                    <div class="qsy mt-6 px-4">
                      <span class="text-gray-700 mr-4">请选择您的就餐方式：</span>
                      <el-radio-group v-model="radio" class="space-x-4">
                        <el-radio :value="1">打包</el-radio>
                        <el-radio :value="2">堂食</el-radio>
                      </el-radio-group>
                    </div>

                    <div class="mt-6 px-4 flex items-center">
                      <span class="text-gray-700 mr-4">请选择您的就餐人数:</span>
                      <el-input-number
                        v-model="personSum"
                        :min="1"
                        :max="15"
                        @change="handleChange"
                        class="w-32"
                      />
                    </div>

                    <div class="pay mt-8 flex justify-end px-4">
                      <el-button
                        type="danger"
                        @click="payfood(obj.totalprice, obj.VipTotalPrice)"
                        class="px-6 py-3 rounded-md hover:bg-red-700 transition-colors"
                      >
                        支付
                      </el-button>
                    </div>
                  </el-dialog>
                </el-badge>
              </div>
            </el-tab-pane>

            <el-tab-pane label="选择点餐">
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
                <div
                  class="sj_cai bg-white rounded-xl shadow-sm overflow-hidden transition-transform hover:scale-105"
                  v-for="(p, index) in foodmenu"
                  :key="p.foodid"
                >
                  <div class="sj_cai_left p-4">
                    <div class="sj_cai_img mb-3">
                      <img :src="p.image" class="w-full h-48 object-cover rounded-lg" />
                    </div>
                    <div class="sj_cai_show">
                      <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ p.foodname }}</h3>

                      <div class="sj_cai_price_box flex items-center mt-2">
                        <div class="sj_cai_price text-red-600 font-bold mr-3">
                          会员价：￥ <span>{{ p.vipprice }}</span>
                        </div>
                        <div class="sj_cai_y_price text-gray-400 line-through">
                          原价:￥{{ p.price }}
                        </div>
                      </div>

                      <div class="sj_cai_price_box1 mt-2">
                        <div class="introduction text-gray-600 text-sm">
                          介绍：{{ p.introduction }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="p-4 border-t border-gray-100">
                    <div class="flex justify-between items-center">
                      <div class="p_price text-gray-500 text-sm">销售量:{{ p.sales }}</div>
                      <div class="sj_cai_buy">
                        <el-button
                          type="danger"
                          @click="add(p.foodid, p.image, p.price, p.vipprice, p.foodname)"
                          class="px-4 py-2 rounded-md hover:bg-red-700 transition-colors"
                        >
                          加入购物车
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="shop flex justify-end mt-8">
                <el-badge :value="obj.clicktime" class="item">
                  <el-button
                    size="large"
                    plain
                    @click="dialogTableVisible = true"
                    class="bg-white text-red-600 border border-red-600 rounded-full p-4 shadow-md hover:bg-red-50 transition-colors"
                  >
                    购物车
                  </el-button>

                  <el-dialog
                    v-model="dialogTableVisible"
                    title="购物车"
                    width="90%"
                    class="rounded-xl shadow-lg"
                  >
                    <el-table :data="gridData" class="mt-4">
                      <el-table-column align="center" type="index" label="编号" width="60" />
                      <el-table-column
                        align="center"
                        property="picture"
                        label="商品图片"
                        width="100"
                      >
                        <template v-slot="scope" class="sj_cai_img">
                          <img :src="scope.row.picture" class="w-16 h-16 object-cover rounded" />
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        property="name"
                        label="商品名称"
                        width="120"
                      />
                      <el-table-column align="center" property="price" label="商品价格" />
                      <el-table-column align="center" property="vipPrice" label="会员价格" />
                      <el-table-column align="center" property="number" label="商品数量" />
                      <el-table-column align="center" fixed="right" label="操作" width="120">
                        <template #default="scope">
                          <el-button
                            type="danger"
                            @click="
                              deleteitem(
                                scope.$index,
                                scope.row.price * scope.row.number,
                                scope.row.vipPrice * scope.row.number,
                                scope.row.number,
                                scope.row.date
                              )
                            "
                            class="px-3 py-1 text-sm"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <el-card class="mt-6 p-4 bg-red-50 rounded-lg">
                      <div class="flex justify-between items-center">
                        <div>
                          <el-text type="warning" size="large">
                            <div v-if="isVip == 0">您是非会员</div>
                            <div v-else>您是尊贵的会员</div>
                          </el-text>
                        </div>
                        <div>
                          <el-text type="warning" size="large">
                            <div v-if="isVip == 0">总金额：￥{{ obj.totalprice }}</div>
                            <div v-else>会员价：￥{{ obj.VipTotalPrice }}</div>
                          </el-text>
                        </div>
                      </div>
                    </el-card>

                    <div class="qsy mt-6 px-4">
                      <span class="text-gray-700 mr-4">请选择您的就餐方式：</span>
                      <el-radio-group v-model="radio" class="space-x-4">
                        <el-radio :value="1">打包</el-radio>
                        <el-radio :value="2">堂食</el-radio>
                      </el-radio-group>
                    </div>

                    <div class="mt-6 px-4 flex items-center">
                      <span class="text-gray-700 mr-4">请选择您的就餐人数:</span>
                      <el-input-number
                        v-model="personSum"
                        :min="1"
                        :max="15"
                        @change="handleChange"
                        class="w-32"
                      />
                    </div>

                    <div class="pay mt-8 flex justify-end px-4">
                      <el-button
                        type="danger"
                        @click="payfood(obj.totalprice, obj.VipTotalPrice)"
                        class="px-6 py-3 rounded-md hover:bg-red-700 transition-colors"
                      >
                        支付
                      </el-button>
                    </div>
                  </el-dialog>
                </el-badge>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </section>
    </main>

    <footer class="bg-gray-800 text-white py-8 mt-12">
      <div class="container mx-auto px-4">
        <div
          class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8"
        >
          <a href="" class="text-gray-300 hover:text-white transition-colors">关于我们</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">商户诚信公约</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">规则中心</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">媒体报道</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">商户入驻</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">推广服务</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">人才招聘</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">最新咨询</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">联系我们</a>
          <span class="text-gray-400">|</span>
          <a href="" class="text-gray-300 hover:text-white transition-colors">应用下载</a>
        </div>
        <div class="text-center text-gray-400 mt-6 text-sm">
          ©2003-2022 外卖人, All Rights Reserved
        </div>
      </div>
    </footer>
  </body>
</template>
